<template>
  <!-- 分销员 -->
  <div>
    <div v-if="pageBool">
      <div style="display: flex; justify-content: space-between">
        <el-button type="primary" @click="pageBool = false">
          添加分销员
        </el-button>
        <el-button @click="$emit('send')">返回</el-button>
      </div>
      <!-- 分销员展示表格 -->
      <div style="margin-top: 10px">
        <el-table :data="distributorList" :empty-text="emptyText">
          <el-table-column label="分销策略名称" prop="title" />
          <el-table-column label="计算周期" prop="settle_cycle_name" />
          <el-table-column label="策略周期" prop="expire_type_name" />
          <el-table-column label="策略时间" prop="updated_at" />
          <el-table-column align="left" label="操作">
            <template slot-scope="scope">
              <div class="flex_y_center">
                <el-button type="primary" @click="editSale(scope.row)">
                  编辑
                </el-button>
                <el-button type="danger" @click="delSale(scope.row.id)">
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="display: flex; justify-content: space-between">
          <div></div>
          <el-pagination
            :current-page.sync="page"
            layout="prev, pager, next, jumper"
            :total="total"
            @current-change="getDistributorList"
          />
        </div>
      </div>
    </div>
    <Add-sale v-else :o-sale-info="saleInfo" @send="togglePage" />
  </div>
</template>

<script>
  import { getSaleList } from '@/api/distributor'

  export default {
    components: {
      AddSale: () => import('./components/addSale.vue'),
    },
    data() {
      return {
        page: 1,
        total: 10,
        emptyText: ' ',
        distributorList: [], // 存放分销员列表

        pageBool: true,

        saleInfo: {}, // 存放当前选中编辑的分销规则信息
      }
    },
    mounted() {
      this.getDistributorList()
    },
    methods: {
      // 获取分销规则列表
      getDistributorList() {
        const loading = this.$loading({
          lock: true,
          target:
            this.distributorList.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        const params = {
          pageSize: this.page,
        }
        getSaleList(params).then((res) => {
          this.distributorList = res.data
          loading.close()
          if (res.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
      },
      // 编辑分销规则
      editSale(item) {
        this.saleInfo = item
        this.pageBool = false
      },
      // 删除选中分销规则
      delSale() {
        this.$confirm('是否删除当前选择的分销规则', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          // 点击确认执行
        })
      },
      // 返回列表界面，重新获取分销列表
      togglePage() {
        this.pageBool = true
        this.saleInfo = {}
        this.$nextTick(() => {
          this.getDistributorList()
        })
      },
    },
  }
</script>

<style scoped>
  ::v-deep .el-table__empty-block {
    height: 500px;
    border: none;
  }
</style>
